<template>
  <div class="color-picker-wrapper">
    <div
      class="color-item"
      :style="{ backgroundColor: item }"
      v-for="item in colors"
      :key="item"
      @click="setColor(item)"
    ></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      colors: [
        '#f2f2f2', '#333', '#666', 'yellow',
        'red', 'blue', 'orange', 'purple', 'skyblue'
      ]
    }
  },
  methods: {
    setColor (color) {
      this.$emit('change', color)
    }
  }
}
</script>

<style lang="stylus" scoped>
.color-picker-wrapper {
    display flex;
    padding: 20px 30px;
    background-color #fff;
    flex-wrap: wrap;
    justify-content center;

    .color-item {
        width: 26px;
        height: 26px;
        margin: 6px ;
        border-radius: 4px;
    }
}
</style>
